<template>
  <div class="baike_page">

    <!-- 导航 开始 -->
    <nav-bar title="口腔百科"></nav-bar>
    <!-- 导航 end -->

    <!-- banner 开始 -->
    <div class="banner">
      <img src="@/assets/images/baike/banner.png" alt="">
    </div>
    <!-- banner end -->

    <!-- 菜单 开始 -->
    <!-- <div class="menu_box">
      <div class="cell" :class="menuActive == item.id?'cell_active':''" v-for="(item,index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
    </div> -->
    <!-- 菜单 end -->

    <!-- 内容区域 开始 -->
    <div class="baike_content">
      <template v-if="baikeList && baikeList.length">
        <!-- 单条数据 开始 -->
        <div class="row_box" v-for="(item,index) in baikeList" :key="index" @click="lookDetail(item)">

          <div class="top">
            <div class="avatar">
              <li-image :src="item.pictures" class="img" :is-preview="false"></li-image>
            </div>
            <div class="info">
              <div class="title">
                <div class="name van-ellipsis">{{ item.name }}</div>
                <div class="score">
                  <span class="sp1">热度</span>
                  <span class="sp2">{{ item.hotScore }}</span>
                </div>
              </div>
              <div class="txt van-multi-ellipsis--l2">{{ item.projectIntroduce }}</div>
            </div>
          </div>

          <div class="bottom">
            <div class="cell">
              <img src="@/assets/images/baike/icon_01.png" alt="">
              <span>治疗说明</span>
            </div>
            <div class="cell">
              <img src="@/assets/images/baike/icon_02.png" alt="">
              <span>术后护理</span>
            </div>
            <div class="cell">
              <img src="@/assets/images/baike/icon_03.png" alt="">
              <span>相关材料</span>
            </div>
            <div class="cell">
              <img src="@/assets/images/baike/icon_04.png" alt="">
              <span>常见问题</span>
            </div>
          </div>

        </div>
        <!-- 单条数据 end -->
      </template>

      <no-data v-else></no-data>

    </div>
    <!-- 内容区域 end -->

  </div>
</template>
<script>
import { PLATFORM_TYPE,GET_ORALCAVITY_BAIKE_SEARCH,GET_SEO_SETTING_INFO } from "@/http/interface";
export default {
  data() {
    return {
      menuActive: 1,
      menus: [
        { name: "矫正", id: 1 },
        { name: "修复", id: 2 },
        { name: "美白", id: 3 },
        { name: "清洁", id: 4 },
        { name: "治疗", id: 5 },
        { name: "其他", id: 6 },
      ],
      baikeList: [],
      seoInfo:{}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link: [{ ref: "canonical", href: `${this.$domain}/baike/list` }],
    };
  },
  async asyncData({ query, $axios }) {
    let params = { pageNumber: 1, pageSize: 10000 };
    let res = await $axios.get(GET_ORALCAVITY_BAIKE_SEARCH, {
      params: params,
    });
    let obj = res.data || {};
    let baikeList = obj.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 7, platform: PLATFORM_TYPE } })
    let seoInfo = seo.data || {}

    return {
      baikeList,
      seoInfo
    };
    console.log(res);
  },
  methods: {

    // 菜单点击事件
    menuEvent(row){
      this.menuActive = row.id
    },

    // 查看详情
    lookDetail(row) {
      this.$router.push({
        path: `/baike/${row.id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/baike/list.less";
</style>